<template>
    <el-drawer
        v-model="isShow"
        :destroy-on-close="true"
        :with-header="false"
        size="50%"
        custom-class="drawer-with-tabs"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="应急处置" name="emergency">
                <ExecuteFireActionBasic
                    @close="closeHandle"
                    :onCloseDrawer="changeShowStatus"
                    :warningData="emergencyWarningData"
                />
            </el-tab-pane>
            <el-tab-pane label="任务列表" name="task" v-if="isEdit">
                <ExecuteFireActionTaskList :onCloseDrawer="changeShowStatus"/>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
</template>

<script setup>
import ExecuteFireActionTaskList from "@/components/ExecuteFireAction/ExecuteFireActionTaskList.vue";
import ExecuteFireActionBasic from "@/components/ExecuteFireAction/ExecuteFireActionBasic.vue";

const emit = defineEmits(['refresh-list'])

const isShow = ref(false)
// 是否是编辑模式
const isEdit = ref(false)
provide('isEdit', isEdit)
// 预案管理 ID
const managementId = ref('')
provide('managementId', managementId)

// tab 名称
const emergency = 'emergency'
const activeName = ref(emergency)

// 应急预警数据
const emergencyWarningData = ref({})


// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
        managementId.value = '' // 关闭时重置 managementId
        isEdit.value = false
        emergencyWarningData.value = {}
        // console.log("managementId reset:", managementId.value)  // 检查 managementId 是否被重置
    }
}

// 显示应急处置新增
const showAddExecuteFireAction = () => {
    changeShowStatus()
    activeName.value = emergency
}

// 显示应急处置编辑
const showEditExecuteFireAction = (data) => {
    changeShowStatus()
    activeName.value = emergency
    isEdit.value = true
    managementId.value = data.managementId
}

// 从应急预警处新增的应急处置
const showAddExecuteFireActionByEmergencyWarning = (data) => {
    changeShowStatus()
    activeName.value = emergency
    emergencyWarningData.value = data
}

defineExpose({showAddExecuteFireAction, showEditExecuteFireAction, showAddExecuteFireActionByEmergencyWarning})


const handleClick = (tab, event) => {
    // console.log(tab, event)
}

// 关闭事件
const closeHandle = () => {
    changeShowStatus()
    emit('refresh-list')
}
</script>

<style scoped lang="scss">

</style>